<template>
  <div id="note-editor-container">
    <div id="note-editor-header">
        <input class="note-title"
               :style="{color: title === '请输入文章标题' ? 'gray' : 'black' }"
               @focus="title = title==='请输入文章标题'?'':title"
               @blur="title = title===''?'请输入文章标题':title"
               v-model="title"/>
        <div class="functional-area">
          <img src="../assets/img/save.png" alt="" title="保存" @click="saveNote()">
          <img src="../assets/img/label.png" alt="" title="添加标签" @click="dialogTabVisible = true">
          <img src="../assets/img/classification.png" alt="" title="选择分类">
          <img src="../assets/img/encryption.png" alt="" title="加密">
          <img src="../assets/img/share.png" alt="" title="分享">
        </div>
    </div>
    <div id="note-editor-content">
      <ckeditor class="editor"
                :editor="editor"
                v-model="editorData"
                :config="editorConfig"
                @focus="editorFocus()"
                @blur="editorData = editorData===''?'<p>请输入正文</p>':editorData"
      ></ckeditor>
    </div>
    <el-dialog title="选择文章类型" :visible.sync="dialogFormVisible" center width="30%" top="30vh">
      <el-form>
<!--        <el-form-item label="活动名称" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.name" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="选择分类" :label-width="formLabelWidth">
          <el-select v-model="noteCategory" placeholder="请选择文章类型" width="80%">
            <el-option v-for="category in categoryList" :key="category.categoryId" :label="category.name" :value="category.categoryId" ></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" class="new-category" @click="innerVisible = true">新建分类</el-button>
      </el-form>
<!--      内联 新建分类对话框-->
      <el-dialog
        class="inner-dialog"
        width="30%"
        top="30vh"
        title="新建分类"
        :visible.sync="innerVisible"
        append-to-body
        center>
        <el-form>
          <el-form-item label="分类名称" :label-width="formLabelWidth">
            <el-input placeholder="请输入分类名称" v-model="categoryName"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveCategory">保 存</el-button>
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="categoryAndNoteSave">确 定</el-button>
      </div>
    </el-dialog>

<!--    输入标签弹窗-->
    <el-dialog title="输入笔记标签" :visible.sync="dialogTabVisible" center width="30%" top="30vh">
      <el-form>
        <el-form-item label="输入标签" :label-width="formLabelWidth">
          <el-input  :v-model="noteTag" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTabVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogTabVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入node_modules中的ckeditor5开始
import {ClassicEditor} from '@ckeditor/ckeditor5-editor-classic';

import { Alignment } from '@ckeditor/ckeditor5-alignment';  // Importing the package.
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Heading } from '@ckeditor/ckeditor5-heading';
import {
  Image,
  ImageCaption,
  ImageStyle,
  ImageToolbar,
  ImageUpload
} from '@ckeditor/ckeditor5-image';
import { Indent } from '@ckeditor/ckeditor5-indent';
import { Link } from '@ckeditor/ckeditor5-link';
import { List } from '@ckeditor/ckeditor5-list';
import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
// 引入node_modules中的ckeditor5结束

// import Editor from 'ckeditor5-custom-build/build/ckeditor';//引入自定义的ckeditor5

export default {
  name: 'NoteEditor',
  // components:{
  //   ckeditor: CKEditor.component
  // },
  data() {
    return {
      categoryName: 'dsadsad',
      title:"请输入文章标题",
      categoryList: [],
      noteCategory: 0,
      dialogFormVisible: false,
      dialogTabVisible: false,
      noteTag: '哈哈 嘻嘻',
      innerVisible: false,
      formLabelWidth: '100px',
      editor: ClassicEditor,
      editorData: '<p>请输入正文</p>',
      editorConfig: { //node_modules中的ckeditor5
        language: 'zh-cn', // 设置语言为中文
        plugins: [
          Alignment,  // Adding the package to the list of plugins.
          Autoformat,
          BlockQuote,
          Bold,
          CloudServices,
          Essentials,
          Heading,
          Image,
          ImageCaption,
          ImageStyle,
          ImageToolbar,
          ImageUpload,
          Indent,
          Italic,
          Link,
          List,
          MediaEmbed,
          Paragraph,
          PasteFromOffice,
          Table,
          TableToolbar,
          TextTransformation
        ],
        toolbar: {
          items: [
            'alignment',  // Displaying the proper UI element in the toolbar.
            'heading',
            '|',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            '|',
            'outdent',
            'indent',
            '|',
            'imageUpload',
            'blockQuote',
            'insertTable',
            'mediaEmbed',
            'undo',
            'redo'
          ]
        }
      },

    }
  },
  computed: {
    tagListComputed(){
       // let tagText = '';
       //  this.tagList.forEach((item,index) => {
       //    if(index === 0){
       //      tagText = `@${item}`;
       //    }else{
       //      tagText = tagText + `,@${item}`;
       //    }
       //  })
    }
  },
  methods: {
    keydownSaveNote(event){
      if (event.ctrlKey && event.key.toLowerCase() === 's') {
        event.preventDefault(); // 阻止浏览器默认的保存操作
        this.saveNote();
      }
    },
    categoryAndNoteSave(){
      console.log('categoryAndNoteSave')
      this.$currentNote.categoryId = this.noteCategory;
      this.saveNote();
      this.dialogFormVisible = false;
    },
    async dialogCategoryList(){
      this.$request.get('/category/list').then(res => {
        if(res.data.code === 200){
          this.categoryList = res.data.data.categoryList.list;
        }else{
          this.$messageHelper.messageWarning(res.data.msg);
        }
      })
    },
    async saveCategory(){
      if(this.categoryName === ''){
        return this.$messageHelper.messageWarning('请输入分类名称');
      }
      this.$request.post('/category/save',{'name':this.categoryName}).then(async res => {
        if (res.data.code === 200) {
          this.$messageHelper.messageSuccess('保存成功');
          await this.dialogCategoryList();
          this.innerVisible = false;
        } else {
          this.$messageHelper.messageWarning(res.data.msg);
        }
      })
    },
    async saveNote(){
      if(this.title === '请输入文章标题' || this.title === ''){
        return this.$messageHelper.messageWarning('请输入文章标题');
      }
      if(this.editorData === '<p>请输入正文</p>' || this.editorData === ''){
        return this.$messageHelper.messageWarning('请输入正文');
      }
      if(! this.$currentNote.hasOwnProperty('categoryId') ||  this.$currentNote.categoryId === 0 || this.$currentNote.categoryId === null || this.$currentNote.categoryId === undefined){
        console.log('sadsa')
        await this.dialogCategoryList();
        this.dialogFormVisible = true;
        return
      }
      let note = {
        title: this.title,
        content: this.editorData,
        categoryId: this.$currentNote.categoryId,
      }
      await this.$request.post('/note/save', note).then(res => {
        console.log(res.data,1111)
        if(res.data.code === 200){
          this.$messageHelper.messageSuccess('保存成功');
        }else{
          this.$messageHelper.messageWarning(res.data.msg);
        }
      })
    },
    editorFocus(){
      this.editorData === '<p>请输入正文</p>' ? this.editorData = '' : this.editorData;
    }
  },
  mounted() {
    window.addEventListener('keydown', this.keydownSaveNote);
  },
  beforeUnmount() {
    window.removeEventListener('keydown', this.keydownSaveNote);
  },
}
</script>

<style lang="less">
#note-editor-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;

  #note-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 9px;
    width: 100%;
    border-radius: 10px;
    margin-bottom: 20px;
    background: rgba(255,255,255,0.5);

    .note-title{
      width: calc(100% - 220px);
      height: 80px;
      font-size: 36px;
      font-weight: bolder;
      background: rgba(255,255,255,0.2);
    }

    .functional-area{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 240px;
      height: 80px;
      img{
        width: 30px;
        height: 30px;
        cursor: pointer;
      }
    }
  }

  #note-editor-content {
    background: #fff;
    width: 100%;
    height: calc(100% - 150px);

    .ck-editor{
      height: 100%;
      .ck-editor__main{
        height: 100%;
        .ck-content{
          height: 100%;
        }
      }
    }
  }
  //选择分类对话框
  .el-dialog{
    border-radius: 10px;
    //.el-dialog__title{
    //  font-size: 20px;
    //  letter-spacing: .1em;
    //  font-weight: bolder;
    //}
    .el-dialog__body{
      padding-bottom: 45px;
    }
    .el-form{
      position: relative;
      .el-form-item{
        label{
          font-size: 18px;
        }
        .el-select{
          width: 100%;
          min-width: 200px;
        }
      }
      .new-category{
        position: absolute;
        right: 0;
      }
    }
    .dialog-footer{
      .el-button{
        border-radius: 8px;
        width: 40%;
        &:first-child{
          margin-right: 20px;
        }
      }
    }
  }

  .inner-dialog{
    border-radius: 10px;
    .el-dialog{
      border-radius: 10px;
      .el-dialog__title{
        font-size: 20px;
        letter-spacing: .1em;
        font-weight: bolder;
      }
      .el-form{
        .el-form-item{
          label{
            font-size: 18px;
          }
          .el-input{
            width: 100%;
            min-width: 200px;
          }
        }
      }
    }
  }
}


</style>
